<template>
  <div class="card animate__animated animate__zoomIn" v-loading="isOperate">
    <div class="card-header">
      <div class="card-header__title">
        {{ isAdd ? "添加信息" : "修改信息" }}
      </div>
      <div class="card-header__close" @click="$emit('close')">
        <i class="el-icon-close"></i>
      </div>
    </div>
    <div class="card-content">
      <el-form :model="formData" :rules="rules" ref="form">
        <el-form-item label="学校名：" prop="schoolname">
          <el-input v-model="formData.schoolname"></el-input>
        </el-form-item>
        <el-form-item label="经纬度：" prop="schoolsite">
          <el-input v-model="formData.schoolsite"></el-input>
        </el-form-item>
        <el-form-item label="学生人数：" prop="studentnumber">
          <el-input v-model="formData.studentnumber"></el-input>
        </el-form-item>
        <el-form-item label="老师人数：" prop="teachernumber">
          <el-input v-model="formData.teachernumber"></el-input>
        </el-form-item>
        <el-form-item label="占地面积：" prop="schoolarea">
          <el-input v-model="formData.schoolarea"></el-input>
        </el-form-item>
        <el-form-item label="招生人数：" prop="admission_num">
          <el-input v-model="formData.admission_num"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="$emit('close')" type="info">取消</el-button>
          <el-button @click="submitForm" type="primary">{{
            isAdd ? "添加" : "修改"
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isAdd: Boolean,
    isOperate: Boolean,
    rowData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      formData: {
        schoolname: "",
        schoolsite: "",
        studentnumber: "",
        teachernumber: "",
        schoolarea: "",
        admission_num: "",
      },
      rules: {
        schoolname: {
          required: true,
          message: "请输入学校名",
          trigger: "blur",
        },
        schoolsite: {
          required: true,
          message: "请输入学校经纬度",
          trigger: "blur",
        },
        studentnumber: {
          required: true,
          message: "请输入学生人数",
          trigger: "blur",
        },
        teachernumber: {
          required: true,
          message: "请输入老师人数",
          trigger: "blur",
        },
        schoolarea: {
          required: true,
          message: "请输入占地面积",
          trigger: "blur",
        },
        admission_num: {
          required: true,
          message: "请输入招生人数",
          trigger: "blur",
        },
      },
    };
  },
  created() {
    if (Object.keys(this.rowData).length && !this.isAdd) {
      this.formData = { ...this.rowData };
    } else {
      this.formData = {
        schoolname: "",
        schoolsite: "",
        studentnumber: "",
        teachernumber: "",
        schoolarea: "",
        admission_num: "",
      };
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit("submitAction", {
            isAdd: this.isAdd,
            rowData: this.formData,
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.card {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 0 0;
  z-index: 99;
  background: #fff;
  box-shadow: 0 0 20px gray;
  border-radius: 5px;
  padding: 15px 80px;
  &-header {
    display: flex;
    justify-content: space-between;
    margin: 0 -50px 30px;
    &__title {
      font-size: 20px;
    }
    &__close {
      cursor: pointer;
      transition: all 0.5s;
      &:hover {
        transform: rotate(-15deg);
      }
    }
  }
  .el-form-item {
    display: flex;
    &:last-child {
      display: block;
      text-align: right;
    }
  }
  .el-input {
    width: 200px;
  }
}
.animate__animated.animate__zoomIn {
  --animate-duration: 0.8s;
}
</style>